<template>
  <span ref="countup">
    {{ numJump }}
  </span>
</template>

<script>
// import TWEEN from "@tweenjs/tween.js";
import { CountUp } from '../../assets/countUp'
export default {
  name: 'Countup',
  props: ['numJump'],
  data () {
    return {
      num: 0,
      numTween: '',
      timer: null,
      options: {
        startVal: 0
      }
    }
  },

  created () {
    //    this.numTween = this.numJump;
  },
  mounted () {
    var that = this
    setTimeout(() => {
      that.initCountUp()
    }, 5000)

    //   if (this.timer) {
    //     clearInterval(this.timer);
    //   } else {
    //     this.timer = setInterval(() => {
    //       this.num = Math.random() * 10;
    //     }, 10000);
    //   }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initCountUp () {
      var $this = this
      const demo = new CountUp($this.$refs.countup, $this.numJump, $this.options)
      if (!demo.error) {
        demo.start()
      }
      this.timer = setInterval(() => {
        const demo = new CountUp(
          $this.$refs.countup,
          $this.numJump,
          $this.options
        )
        if (!demo.error) {
          demo.start()
        }
      }, 15000)
    }
  },
  watch: {
    // num() {
    //   new TWEEN.Tween({
    //     number: this.numJump == 0 ? 0 : 1,
    //   })
    //     .to(
    //       {
    //         number: this.numJump,
    //       },
    //       1000
    //     )
    //     .onUpdate((tween) => {
    //       this.numTween = tween.number.toFixed(0);
    //     })
    //     .start();
    //   function animate() {
    //     if (TWEEN.update()) {
    //       requestAnimationFrame(animate);
    //     }
    //   }
    //   animate();
    // },
  }
}
</script>

<style lang='less'>
</style>
